<template>
  <div>
    <a-row>
      <a-col :xs="{ span : 24 }" :sm="{ span:12 }" v-if="remark" class="result">审核拒绝：{{remark}}</a-col>
    </a-row>
    <a-form @submit="handleSubmit" style="margin-top: 8px;width:80%;margin:0 auto;" :form="form">
      <a-row>
        <a-col :xs="{ span : 24 }" :sm="{ span:7 }" class="formGroupTitle">账户信息</a-col>
      </a-row>
      <a-form-item v-bind="formItemLayout" label="Email" help="
                此邮箱将用于接收重要邮件，请准确填写，填写后无法更改">
        <a-input name="email" placeholder="请输入邮箱地址" v-decorator="[
                      'email', { rules: [{type: 'email', message: '请输入有效邮箱地址!', },
                       {required: true, message: '请输入邮箱地址!'},
                       {validator: validatemail}],
                       validateTrigger: 'blur'}
                      ]" />
      </a-form-item>
      <!-- , pattern: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/ -->

      <a-form-item v-bind="formItemLayout" label="手机号码" help="
                此手机号将用于接收重要信息，请准确填写，填写后无法更改">
        <div>
          <a-input :disabled="modifyInput" name="phone" placeholder="请输入手机号码" v-decorator="[
                                        'phone',
                                        {
                                         rules: [{ required: true, message: '请输入手机号码!' },{validator: validateCode}],validateTrigger: 'blur'
                                        }
                                        ]" @change="phoneChange" />
        </div>
      </a-form-item>
      <a-row>
        <a-col :xs="{ span : 24 }" :sm="{ span:7 }" class="formGroupTitle">基本信息</a-col>
      </a-row>
      <a-form-item v-bind="formItemLayout" label="客户类型">
        <div>
          <a-select disabled class="width-sty" v-decorator="[
                    'merchantType',
                    {rules: [{ required: true, message: '请选择客户类型' }], initialValue:'small' }
                  ]" placeholder="请选择客户类型" @change="handleChange1">
            <a-select-option value="small">小微商户</a-select-option>
          </a-select>
        </div>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="客户名称" help="请填写：个体户+姓名，如个体户张三">
        <a-input @blur="testmerchantName" v-decorator="[
                        'merchantName',
                        {rules: [{ required: true, message: '请输入客户名称' }]}
                      ]" placeholder="请按要求填写" />
      </a-form-item>

      <!-- <a-form-item v-bind="formItemLayout" label="商户类别">
        <a-cascader
          style="width: 60%;"
          v-decorator="[
                      'mccName',
          {rules: [{ required: true, message: '请选择商户类别' }]}
                    ]"
          :options="mccoptions"
          @change="mccHandleChange"
          placeholder="请选择商户类别"
           
        />
      </a-form-item> -->

      <!-- <a-form-item v-bind="formItemLayout" label="客户简称">
                <a-input v-decorator="[
                        'shortname',
                        {rules: [{ required: true, message: '请输入客户简称' }]}
                      ]" disabled placeholder="请输入简称" />
      </a-form-item>-->

      <!-- <a-form-item v-bind="formItemLayout" label="实际经营地址">
        <a-cascader class="w-sty" v-if="!issh" v-decorator="[
                        'Address',
                        {rules: [{ required: true, message: '实际经营地址' }]}
                      ]" :options="options2" @change="onChange" placeholder="请选择经营地址"   />
      </a-form-item> -->


      <a-form-item v-bind="formItemLayout" label="详细地址">
        <a-textarea v-decorator="[
                        'realAddress',
                        {rules: [{ required: true, message: '请输入详细地址' }]}
                      ]" placeholder="请输入详细地址" :rows="2" />
      </a-form-item>

      <a-row>
        <a-col :xs="{ span : 24 }" :sm="{ span:7 }" class="formGroupTitle">申请人信息</a-col>
      </a-row>
      <a-form-item v-bind="formItemLayout" label="姓名">
        <a-input v-decorator="[
                        'identityName',
                        {rules: [{ required: true, message: '请输入姓名' }]}
                      ]" placeholder="请输入姓名" @change="identityNameChange" />
      </a-form-item>

      <a-form-item v-bind="formItemLayout" label="证件类型">
        <div>
          <a-select disabled class="width-sty" v-decorator="[
                        'codetype',
                        {rules: [{ required: true, message: '请选择证件类型' }],initialValue: 'legal'}
                      ]">
            <a-select-option value="legal">身份证</a-select-option>
            <a-select-option value="lucy">护照</a-select-option>
            <a-select-option value="disabled">港澳台通行证</a-select-option>
            <a-select-option value="Yiminghe">军官证</a-select-option>
            <a-select-option value="Yiminghe">户口簿</a-select-option>
          </a-select>
        </div>
      </a-form-item>

      <a-form-item v-bind="formItemLayout" label="证件号码">
        <a-input v-decorator="[
                        'identityNo',
                        {rules: [{ required: true, message: '请输入证件号码' },{
                           validator: validateIdentityNo
                         }],validateTrigger: 'blur'}
                      ]" placeholder="请输入证件号码" @change="identityNoChange" />
      </a-form-item>

      <a-form-item v-bind="formItemLayout" label="证件有效期">
        <a-date-picker :disabledDate="disabledDate" placeholder="请选择证件有效期" @change="dateChange" v-decorator="[
                        'expiryDate',
                        {rules: [{ required: true, message: '请选择证件有效期' }]}
                      ]" />
        <span @click="longexpiryDate" style="color:#1478d5;cursor: pointer;fontSize:13px;">&nbsp; 长期</span>
      </a-form-item>
      <a-row style="display:flex;align-items: center;">
        <a-col :sm="{ span:7 }" class="formGroupTitle">银行账户信息</a-col>
        <a-col v-if="bankInfo" :sm="{ span:4,offset:1 }"
          style="margin-bottom: 20px;font-size:12px;color:#1478d5;cursor: pointer;" @click="bankInfoModify">修改</a-col>
        <a-col style="margin-bottom: 20px;" :sm="{ span:8,offset:1 }">
          <span v-if="mer && !bankInfo" style="font-size:12px;color:#29a576;">请填写法人借记卡信息！</span>
        </a-col>
      </a-row>
      <a-form-item v-bind="formItemLayout" label="账户名称">
        <a-input disabled v-decorator="[
                        'accountName',
                        {rules: [{ required: true, message: '请输入账户名称' }]}
                      ]" placeholder="请输入账户名称" />
      </a-form-item>

      <a-form-item v-bind="formItemLayout" label="开户行名称">
        <div>
          <a-select :disabled="bankInfo" showSearch :notFoundContent="null" :defaultActiveFirstOption="false"
            :showArrow="false" :filterOption="false" @focus="handleFocus" @blur="handleBlur" @search="bankNameSearch"
            @change="bankNameChange" class="width-sty" v-decorator="[
                        'bankName',
                        {rules: [{ required: true, message: '请选择开户行名称' }]}
                      ]" placeholder="请输入银行名称进行选择">
            <a-select-option v-for="d in seloptions" :key="d.value">{{d.label}}</a-select-option>
          </a-select>
        </div>
      </a-form-item>

      <a-form-item v-bind="formItemLayout" label="开户行所在地" required>
        <a-cascader :disabled="bankInfo" class="w-sty" v-model="bankaddress" :options="options3" @blur="addressBlur"
          @change="addressChange" placeholder="请选择开户行所在地"   />
        <!-- v-decorator="['bankaddress ',{rules: [{ required: true, message: '请选择开户行所在地' }]}]" -->
      </a-form-item>

      <a-form-item v-bind="formItemLayout" label="支行名称">
        <div>
          <a-select showSearch @search="handleSearch" :disabled="bankInfo" labelInValue @change="bankBranchNameChange"
            optionFilterProp="children" :filterOption="filterOption" style="width:100%;" v-decorator="[
                        'bankBranchName',
                        {rules: [{ required: true, message: '请输入支行名称' }]}
                      ]" placeholder="请选择支行名称">
            <a-select-option v-for="d in bankBranchoptions" :key="d.value">{{d.label}}</a-select-option>
          </a-select>
        </div>
      </a-form-item>

      <a-form-item v-bind="formItemLayout" label="账号">
        <a-input :disabled="bankInfo" @blur="findCardBin" v-decorator="[
                        'cardNo',
                        {rules: [{ required: true, message: '请输入账号' }]}
                      ]" placeholder="请输入账号" />
        <span v-if="this.cardType=='2'||this.cardType=='3'"
          style="margin-top:10px;font-size:12px;color:#1478d5;">请填写借记卡卡号！</span>
      </a-form-item>

      <a-form-item v-bind="formItemLayout" label="预留手机号">
        <div>
          <a-input name="phone" placeholder="请输入银行预留手机号码" v-decorator="[
                              'mobileNo',
                              {
                               rules: [{ required: true, message: '请输入银行预留手机号码!' },{validator: validateCode}],validateTrigger: 'blur'
                              }
                              ]" />
          <!-- <span v-if="!bankInfo">
                        <a-button v-if="issend" type="primary" @click="getCode" :loading="loading">发送验证码</a-button>
                        <a-button v-if="!issend" disabled type="primary">{{ count }}s后可再次发送</a-button>
          </span>-->
        </div>
      </a-form-item>
      <!-- 对私账户显示 -->
      <a-form-item v-bind="formItemLayout" label="持卡人身份证号">
        <a-input v-decorator="[
                                      'idCard',
                                      {rules: [{ required: true, message: '请输入持卡人证件号码' },{
                                         validator: validateIdentityNo2
                                       }],validateTrigger: 'blur'}
                                    ]" disabled placeholder="请输入持卡人证件号码" />
      </a-form-item>

      <a-form-item v-if="mer && !bankInfo" v-bind="formItemLayout" label="验证码">
        <a-input name="captcha" v-decorator="[
                        'captcha',
                        {rules: [{ required: true, message: '请输入短信验证码!' },{validator: validateverCode}],validateTrigger: 'blur'}
                      ]" placeholder="请输入短信验证码" />
      </a-form-item>
      <!-- <a-row>
                <a-col :xs="{ span : 24 }" :sm="{ span:7 }" class="formGroupTitle">推荐人信息</a-col>
            </a-row>
            <a-form-item v-bind="formItemLayout" label="推荐人代码">
                <a-input v-decorator="[
                        'agentCode',
                      ]" placeholder="请输入推荐人代码" />
      </a-form-item>-->
      <!-- <a-row>
                <a-col :xs="{ span : 24 }" :sm="{ span:16,offset:8 }">
                    <a-form-item>
                        <a-checkbox @change="onChange2">本人充分了解并清楚知晓出租、出借、出售、购买账户的相关法律责任和惩戒措施，承诺依法依规开立和使用本人账户
                        </a-checkbox>
                    </a-form-item>
                </a-col>
      </a-row>-->
      <a-col :xs="{ span : 24 }" :sm="{ span:16,offset:8 }">
        <a-form-item>
          <a-button class="submitButton" html-type="submit" :loading="submitLoading" type="primary">下一步</a-button>
        </a-form-item>
      </a-col>
    </a-form>
  </div>
</template>
<script>
  //银行信息 修改 加按钮 点击按钮可修改  默认 不可修改状态
  import {
    Radio,
    Input,
    InputNumber,
    DatePicker,
    Cascader
  } from "ant-design-vue";
  import pick from "lodash.pick";
  import api from "@/common/api";
  import { get, post } from "@/common/api";
  import moment from "moment";
  import zh_CN from "ant-design-vue/lib/date-picker/locale/zh_CN";
  import { type } from "os";
  import typeData from "../../../../static/typeData.js";
  const dateFormat = "YYYY-MM-DD";

  export default {
    components: {
      RangePicker: DatePicker.RangePicker,
      Cascader
    },

    data() {
      return {
        zh_CN,
        cardType: "",
        typeDisabled: false,
        submitLoading: false,
        modifyInput: false,
        loading: false,
        apiaddress: "",
        revise: false,
        remark: "",
        mer: false,
        issend: true,
        phone: false,
        phonevalue: "",
        Confirm: false, //验证码验证是否成功
        emailvalue: "",
        verCode: "",
        count: "",
        timer: "",
        bankdata: "",
        array: [],
        mccName: "",
        mccoptions: [],
        bankaddress: [],
        startDate: "",
        endDate: "",
        dateFormat: "YYYY-MM-DD",
        memberNo: "",
        // value:'',
        modify: {
          merchantPosp: {},
          identity: {},
          bankCard: {}
        },
        ischeck: false,
        isempty: true,
        array: [],
        text: [],
        text2: [],
        busitext: [],
        issh: false,
        // areaOptions: '',
        // form: this.$form.createForm(this),
        expiryDate: "",
        expiryDate2: "",
        merchantName: "",
        shortName: "",
        merchantType: "",
        industryCategoryCode: "",
        industry: "",
        orgRegisterPrincipal: "",
        orgExpiryDate: "",
        createDate: "",
        mainBusiness: "",
        realProvinceItem: {},
        realCityItem: {},
        realDistrictItem: {},
        realAddress: "",
        orgEmployees: "",
        contactName: "",
        contactEmail: "",
        contactPhone: "",
        id: "",
        bankInfo: false,
        idCardShow: false,
        corpIdentify: {
          identityName: "",
          type: "legal",
          identityNo: "2222222222222",
          expiryDate: "永久",
          imgHead: null,
          imgEmblem: null,
          id: ""
        },
        actualControlIdentify: {
          identityName: "陈某某",
          type: "control",
          identityNo: "3333333333333",
          expiryDate: "2090-03-03",
          imgHead: null,
          imgEmblem: null,
          id: ""
        },
        bankCard: {
          bankName: "",
          bankBranchName: "",
          bankNo: "",
          accountName: "",
          cardNo: "",
          province: "",
          city: "",
          id: ""
        },
        formItemLayout: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 7 }
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 13, offset: 1 },
            md: { span: 10, offset: 1 }
          }
        },
        options: [
          {
            label: "北京市",
            value: "1000",
            children: [
              {
                label: "北京市",
                value: "1000",
                children: [
                  {
                    label: "东城区",
                    value: "1021"
                  }
                ]
              }
            ]
          }
        ],
        options2: [
          {
            label: "北京市",
            value: "1000",
            children: [
              {
                label: "北京市",
                value: "1000",
                children: [
                  {
                    label: "东城区",
                    value: "1021"
                  }
                ]
              }
            ]
          }
        ],
        options3: [],
        bankBranchList: [],
        bankBranchoptions: [],
        Areaoptions: [],
        Categoryoptions: [],
        seloptions: [],
        merchantPosp: ""
      };
    },
    beforeCreate() {
      this.form = this.$form.createForm(this);
    },

    created() { },

    mounted: function () {
      // this.getmccData();
      this.getareaData();
      this.memberNo = sessionStorage.getItem("memberNo");

      let orgBMemberNo = sessionStorage.getItem("orgBMemberNo");
      if (orgBMemberNo) {
        this.getExistData(orgBMemberNo);
      }
    },

    watch: {
      endValue(val) {
        console.log("endValue", val);
      }
    },

    methods: {
      moment,
      //日期不可选
      disabledDate(current) {
        // Can not select days before today and today
        return current && current < moment().endOf("day");
      },
      downaddress() {
        this.issh = true;
      },
      // 商户类别获取
      getmccData() {
        this.$axios.get("/agent/mcc/list").then(res => {
          console.log("res", res);
          // const result = res.data;
          if (res.data.list) {
            let list = res.data.list;
            let arr = [];
            let newArr = list.map((item, index, list) => {
              let test = {
                label: item.categoryName,
                value: item.categoryName,
                children: []
              };
              arr.push(test);
              if (item.items) {
                let children = [];

                for (let i = 0; i < item.items.length; i++) {
                  let test2 = {
                    label: item.items[i].name,
                    value: item.items[i].mcc
                    // children: []
                  };
                  children.push(test2);
                }
                // console.log("children", children);
                arr[index]["children"] = children;
              }
              return arr;
            });
            console.log("newArr", newArr);
            this.mccoptions = newArr[0];
            console.log("this.mccoptions", this.mccoptions);
          } else {
            console.log("res", res);
          }
        });
      },
      gettypeData() {
        this.$axios.get("/agent/industry/list").then(res => {
          const result = res.data;
          if (res.data.list) {
            let list = result.list;
            let arr = [];
            let newArr = list.map((item, index, list) => {
              let test = {
                label: item.label,
                value: item.value,
                children: []
              };
              arr.push(test);
              if (item.children) {
                let children = [];

                for (let i = 0; i < item.children.length; i++) {
                  let test2 = {
                    label: item.children[i].label,
                    value: item.children[i].value,
                    children: []
                  };
                  children.push(test2);

                  if (item.children[i].children) {
                    let child2 = [];
                    for (let a = 0; a < item.children[i].children.length; a++) {
                      let test3 = {
                        label: item.children[i].children[a].label,
                        value: item.children[i].children[a].value,
                        children: []
                      };
                      child2.push(test3);

                      if (item.children[i].children[a].children) {
                        let child3 = [];
                        for (
                          let b = 0;
                          b < item.children[i].children[a].children.length;
                          b++
                        ) {
                          let test4 = {
                            label: item.children[i].children[a].children[b].label,
                            value: item.children[i].children[a].children[b].value
                          };
                          child3.push(test4);
                        }
                        child2[a].children = child3;
                      }
                    }
                    children[i].children = child2;
                  }
                }
                arr[index]["children"] = children;
              }
              return arr;
            });
            this.Categoryoptions = newArr[0];
          } else {
            // console.log("res", res);
          }
        });
      },
      //查询是否已有信息
      getExistData(memberNo) {
        this.$axios.get("/agent/merchant/network/fetch/step1/" + memberNo).then(res => {
          console.log("res", res);
          if (res.data.code == "OK") {
            if (res.data.data.merchantPosp.merchantName) {
              // 邮箱  手机号 不可修改
              this.modifyInput = true;

              this.remark = res.data.data.merchantPosp.remark;
              //已有信息 修改
              this.modify = res.data.data;
              let merchantPosp = res.data.data.merchantPosp;
              let member = res.data.data.member;
              let identity = res.data.data.identity;
              let bankCard = res.data.data.bankCard;

              // this.mccName = merchantPosp.mccName;

              // this.idCardShow = bankCard.isPrivate ? true : false;
              // let industryCategoryCode = merchantPosp.industry.value.split("|");
              this.bankaddress = [bankCard.province, bankCard.city];
              // this.corpIdentify.id = identityLegal.id;
              // this.actualControlIdentify.id = identityControl.id;
              // this.bankCard.id = bankCard.id;
              // this.bankCard.bankBranchName = bankCard.bankBranchName;
              this.expiryDate = identity.expiryDate;
              this.bankCard.province = bankCard.province;
              this.bankCard.city = bankCard.city;

              this.realProvinceItem.value = merchantPosp.realProvince;
              this.realCityItem.value = merchantPosp.realCity;
              this.realDistrictItem.value = merchantPosp.realDistrict;

              this.realProvinceItem.label = merchantPosp.realProvinceName;
              this.realCityItem.label = merchantPosp.realCityName;
              this.realDistrictItem.label = merchantPosp.realDistrictName;
              this.options3 = [
                {
                  value: bankCard.province,
                  label: bankCard.province,
                  children: [
                    {
                      value: bankCard.city,
                      label: bankCard.city
                    }
                  ]
                }
              ];
              //赋值
              this.$nextTick(() => {
                this.form.setFieldsValue({
                  email: member.email,
                  phone: member.mobileNo,
                  merchantName: merchantPosp.merchantName,
                  // Address: [
                  //   merchantPosp.realProvince,
                  //   merchantPosp.realCity,
                  //   merchantPosp.realDistrict
                  // ],
                  realAddress: merchantPosp.realAddress,

                  identityName: identity.identityName,
                  identityNo: identity.identityNo,
                  expiryDate: moment(identity.expiryDate),

                  accountName: identity.identityName,
                  bankName: bankCard.bankName,
                  bankBranchName: {
                    key: bankCard.bankNo,
                    label: bankCard.bankBranchName
                  },
                  cardNo: bankCard.cardNo,
                  mobileNo: bankCard.mobileNo,
                  idCard: identity.identityNo,
                  // mccName: this.mccName.split("|")
                });
                this.handleBlur()
                this.text2 = this.bankaddress
                this.addressBlur();
              });
            } else {
              console.log("无数据");
            }
          }
        });
      },
      //新用户数据
      postaddData(data) {
        console.log("data", data);
        this.$axios.post("/agent/merchant/network/small/add", data).then(res => {
          console.log("add", res);
          if (res.data.code == "OK") {
            this.submitLoading = false;
            sessionStorage.setItem("orgBMemberNo", res.data.data.memberNo);
            sessionStorage.setItem("orgBMerchantName", res.data.data.username);
            this.$router.replace("/OrgRegister/dataUploadB/step2");
          } else {
            this.submitLoading = false;
            this.$message.error(res.data.message);
          }
        });
      },
      //更新用户数据
      postupdateDate(data) {
        console.log("data", data);
        this.$axios.post("/agent/merchant/network/small/update", data).then(res => {
          console.log("update", res);
          if (res.data.code == "OK") {
            this.submitLoading = false;
            //   sessionStorage.setItem("orgBMemberNo", res.data.data.memberNo);
            //   sessionStorage.setItem("orgBMerchantName", res.data.data.username);
            this.$router.replace("/OrgRegister/dataUploadB/step2");
          } else {
            this.submitLoading = false;
            this.$message.error(res.data.message);
          }
        });
      },
      // 客户信息修改提交
      // updateData(data) {
      //     console.log('data', data)
      //     api.updateData(data, res => {
      //         console.log('res', res)
      //         if (res.code == 'OK') {
      //             this.submitLoading = false;
      //             // this.$router.push("/OrgRegister/step5");
      //             this.$router.replace("/OrgRegister/dataUploadB/step2");
      //         } else {
      //             this.submitLoading = false;
      //             this.$message.error(res.data.message)
      //         }
      //     }, err => {
      //         console.log(err)
      //     })
      // },

      handleSubmit(e) {
        e.preventDefault();
        // 小微商户提交
        this.form.validateFields((err, values) => {
          if (!err) {
            // 保存客户名称 法人/负责人
            sessionStorage.setItem("name", values.merchantName);
            sessionStorage.setItem("identityName", values.identityName);
            console.log(values.bankBranchName);
            const data = {
              logMerchantPospAddRequest: {
                merchantType: "small",
                merchantName: values.merchantName,
                // realProvince: this.realProvinceItem.value,
                // realCity: this.realCityItem.value,
                // realDistrict: this.realDistrictItem.value,
                // realProvinceName: this.realProvinceItem.label,
                // realCityName: this.realCityItem.label,
                // realDistrictName: this.realDistrictItem.label,
                realAddress: values.realAddress,
                //   agentCode: values.agentCode,

                // mccName: this.mccName

              },
              identity: {
                identityName: values.identityName,
                identityNo: values.identityNo,
                expiryDate: this.expiryDate
              },
              logBankCard: {
                accountName: values.accountName,
                bankName: values.bankName,
                province: this.bankCard.province,
                city: this.bankCard.city,
                bankBranchName: values.bankBranchName.label,
                bankNo: values.bankBranchName.key,
                cardNo: values.cardNo,
                mobileNo: values.mobileNo
              },
              memberAddRequest: {
                email: values.email,
                mobileNo: values.phone
              }
            };
            const data1 = {
              logMerchantPospUpdateRequest: {
                merchantType: "small",
                id: this.modify.merchantPosp.id || "",
                memberNo: sessionStorage.getItem("orgBMemberNo"),
                merchantName: values.merchantName,
                // realProvince: this.realProvinceItem.value,
                // realCity: this.realCityItem.value,
                // realDistrict: this.realDistrictItem.value,
                // realProvinceName: this.realProvinceItem.label,
                // realCityName: this.realCityItem.label,
                // realDistrictName: this.realDistrictItem.label,
                realAddress: values.realAddress,

                // mccName: this.mccName
                // agentCode: values.agentCode

              },
              identity: {
                id: this.modify.identity.id || "",
                identityName: values.identityName,
                identityNo: values.identityNo,
                expiryDate: this.expiryDate
              },
              logBankCard: {
                id: this.modify.bankCard.id || "",
                accountName: values.accountName,
                bankName: values.bankName,
                province: this.bankCard.province,
                city: this.bankCard.city,
                bankBranchName: values.bankBranchName.label,
                bankNo: values.bankBranchName.key,
                cardNo: values.cardNo,
                mobileNo: values.mobileNo
              }
            };
            this.submitLoading = true;
            console.log(
              "this.modify.merchantPosp.id",
              this.modify.merchantPosp.id
            );
            if (this.modify.merchantPosp.id) {
              this.postupdateDate(data1);
            } else {
              this.postaddData(data);
            }
          }
        });
        // }
      },
      validateIdentityNo(rule, value, callback) {
        const form = this.form;
        if (value && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
          callback("您输入的身份证号码格式有误！");
        } else {
        }
        callback();
      },
      validateIdentityNo2(rule, value, callback) {
        const form = this.form;
        if (value && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
          callback("您输入的身份证号码格式有误！");
        } else {
        }
        callback();
      },
      testmerchantName() {
        let merchantName = this.form.getFieldValue("merchantName").slice(0, 3);
        console.log(merchantName);
        if (merchantName != "个体户") {
          this.$message.warning("请填写：个体户+姓名，如个体户张三")
        }
      },
      validateCode(rule, value, callback) {
        if (value && !/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
          this.phone = false;
          callback("您输入的手机号格式有误！");
          return;
        } else {
          if (!value) {
            this.phone = false;
          } else {
            this.phone = true;
            this.phonevalue = value;
          }
          callback();
        }
      },
      validateverCode(rule, value, callback) {
        const reg = new RegExp("^[0-9]{4,10}$");
        if (value && !reg.test(value)) {
          callback("您输入的验证码格式有误！");
        } else {
          this.verCode = value;
        }
        callback();
      },
      // 验证码验证
      verCodecom() {
        let phone = this.form.getFieldValue("mobileNo");
        this.$axios
          .get("/agent/customer/org/bank/mobile/check/" + phone + "/" + this.verCode)
          .then(res => {
            if (res.data.code == "OK") {
              this.$message.success(res.data.message);
            } else {
              this.$message.error(res.data.message);
              return false;
            }
          });
      },
      validatemail(rule, value, callback) {
        const reg = new RegExp(
          "^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
        );
        if (value && !reg.test(value)) {
          callback("您输入的邮箱格式有误！");
          return;
        } else {
          this.emailvalue = value;
          console.log(this.emailvalue);
          callback();
        }
      },
      mccHandleChange(value, selectedOptions) {
        console.log("typeChange", typeof value, value);
        console.log(selectedOptions);
        let arr = value;
        let labelarr = selectedOptions;
        this.array = [];
        if (labelarr) {
          if (labelarr.length > 0) {
            for (var i = 0; i < labelarr.length; i++) {
              this.array.push(labelarr[i].label);
            }
          }
        }
        // console.log(this.array);
        // console.log(typeof arr.join("|"), arr.join("|"));a
        this.mccName = arr.join("|");
        // this.mcc = {
        //   value: this.array.join("|"),
        //   label: arr.join("|")
        // };
        console.log(this.mccName);
      },
      handleChange(value, selectedOptions) {
        console.log("typeChange", typeof value, value);
        console.log(selectedOptions);
        let arr = value;
        let labelarr = selectedOptions;
        this.array = [];
        if (labelarr) {
          if (labelarr.length > 0) {
            for (var i = 0; i < labelarr.length; i++) {
              this.array.push(labelarr[i].label);
            }
          }
        }
        this.industry = {
          value: arr.join("|"),
          label: this.array.join("|")
        };
        console.log(this.industry);
      },
      handleChange1(value) {
        // if (value == "other") {
        //   this.isother = true;
        // } else {
        //   this.isother = false;
        // }
        if (value == "mer") {
          // console.log("选了个体工商户");
          this.mer = true;
          // sessionStorage.setItem("mer", true);
        } else {
          this.mer = false;
          // sessionStorage.setItem("mer", false);
        }
      },
      handleChange2(value) {
        if (value == "other") {
          this.isother = true;
        } else {
          this.isother = false;
        }
      },
      doNext(step) {
        var st = step + 1;
        this.$router.push("/OrgRegister/step" + st);
      },
      getareaData() {
        this.$axios.get("/agent/division/all").then(res => {
          const result = res.data;
          if (res.data.list) {
            let list = result.list;
            let arr = [];
            let newArr = list.map((item, index, list) => {
              let test = {
                label: item.label,
                value: item.value,
                children: []
              };
              arr.push(test);
              if (item.children) {
                let children = [];
                for (let i = 0; i < item.children.length; i++) {
                  let test2 = {
                    label: item.children[i].label,
                    value: item.children[i].value,
                    children: []
                  };
                  children.push(test2);

                  if (item.children[i].children) {
                    let child2 = [];
                    for (let a = 0; a < item.children[i].children.length; a++) {
                      let test3 = {
                        label: item.children[i].children[a].label,
                        value: item.children[i].children[a].value
                      };
                      child2.push(test3);
                    }
                    children[i].children = child2;
                  }
                }
                arr[index]["children"] = children;
              }
              return arr;
            });
            // console.log("newArr", newArr);
            this.options = newArr[0];
            this.options2 = newArr[0];
      
          } else {
          }
        });
      },
      phoneChange() {
        this.revise = false;
      },

      onChange(value, selectedOptions) {
        console.log("changevalue", typeof value, value);
        this.text = value;
        // this.text = selectedOptions.map(o => o.label);
        if (selectedOptions.length == 1) {

        } else if (selectedOptions.length == 2) {

        } else if (selectedOptions.length == 3) {
                    this.realProvinceItem = {
            label: selectedOptions[0].label,
            value: selectedOptions[0].value
          };
                    this.realCityItem = {
            label: selectedOptions[1].label,
            value: selectedOptions[1].value
          };
          this.realDistrictItem = {
            label: selectedOptions[2].label,
            value: selectedOptions[2].value
          };
        } else {
          console.log(selectedOptions);
        }
        console.log("this.text", this.text);
        console.log(
          this.realProvinceItem,
          this.realCityItem,
          this.realDistrictItem
        );
      },

      addressChange(value, selectedOptions) {
        console.log("addressChange", value);
        this.text2 = value;
        this.bankaddress = value;
        // this.text2 = selectedOptions.map(o => o.label);
        console.log("this.text2", this.text2);
        // if (selectedOptions.length == 1) {
        //   this.bankCard.province = {
        //     label: selectedOptions[0].label,
        //     value: selectedOptions[0].value
        //   };
        // } else if (selectedOptions.length == 2) {
        //   this.bankCard.city = {
        //     label: selectedOptions[1].label,
        //     value: selectedOptions[1].value
        //   };
        // } else if (selectedOptions.length == 3) {
        //   this.bankCard.district = {
        //     label: selectedOptions[2].label,
        //     value: selectedOptions[2].value
        //   };
        // }else {
        //   console.log(selectedOptions);
        // }

        this.bankCard.province = this.text2[0];
        this.bankCard.city = this.text2[1];
        // this.bankCard.district = this.text2[2];
      },
      merchantNameChange(e) {
        // let merchantType = this.form.getFieldValue("merchantType");
        // if (merchantType == "org") {
        this.form.setFieldsValue({
          accountName: e.target.value,
          shortname: e.target.value
        });
        this.isempty = false;
        // }
      },
      identityNameChange(e) {
        this.form.setFieldsValue({
          accountName: e.target.value,
          shortname: e.target.value
        });
        this.isempty = false;
      },
      identityNoChange(e) {
        this.form.setFieldsValue({
          idCard: e.target.value
        });
      },
      onChange2(e) {
        console.log("changevalue2", e.target.checked);
        if (e.target.checked == true) {
          this.ischeck = true;
        } else {
          this.ischeck = false;
        }
      },
      dateChange(date, dateString) {
        console.log("dateString", dateString);
        this.expiryDate = dateString;
      },
      longexpiryDate() {
        this.$nextTick(() => {
          this.form.setFieldsValue({
            expiryDate: moment("9999-01-01")
          });
        });
        this.expiryDate = "9999-01-01";
      },
      // 开户名称搜索
      bankNameSearch(value) {
        // console.log(value);
        let data = {
          bankSuper: value
        };
        api.getBankName(data, res => {
          if (res.code == "OK") {
            this.seloptions = [];
            console.log("res.data", typeof res.list, res.list);
            res.list.forEach(r => {
              this.seloptions.push({
                value: r.value,
                label: r.label
              });
            });
            console.log(this.seloptions);
          } else {
            console.log("res", res);
          }
        });
        console.log(this.seloptions);
      },
      bankNameChange(value) {
        console.log(value);
        this.form.setFieldsValue({
          bankName: value
        });
        let data = {
          bankSuper: value
        };
        api.getBankName(data, res => {
          console.log("res", res);
          if (res.code == "OK") {
            this.seloptions = [];
            console.log("res.data", typeof res.list, res.list);
            res.list.forEach(r => {
              this.seloptions.push({
                value: r.value,
                label: r.label
              });
            });
            console.log(this.seloptions);
          } else {
            console.log("res", res);
          }
        });
      },
      bankBranchNameChange(value) {
        console.log("value", value);
        this.bankCard.bankNo = value.key;
        this.bankCard.bankBranchName = value.label;
      },
      handleFocus() {
        console.log("focus");
      },
      handleBlur() {
        let selvalue = this.form.getFieldValue("bankName");
        if (selvalue) {
          console.log("开户行:", selvalue);
          let data = {
            bankCode: selvalue
          };
          api.getBankArea(
            data,
            res => {
              console.log("res", res);
              if (res.code == "OK") {
                this.options3 = res.list;
              } else {
                console.log(res);
              }
            },
            err => {
              console.log(err);
            }
          );
        } else {
          // console.log("开户行为空", selvalue);
        }
      },
      // 开户地址失去焦点
      addressBlur() {
        let selvalue = this.form.getFieldValue("bankName");
        console.log("开户行地址：", this.text2);
        if (this.text2) {
          let data = {
            bankCode: selvalue,
            province: this.text2[0],
            city: this.text2[1],
            bankName: ""
          };
          api.getBankBranch(
            data,
            res => {
              console.log("res", res);
              if (res.code == "OK") {
                this.bankBranchoptions = res.list;
                this.bankBranchList = res.list;
              } else {
                console.log(res);
              }
            },
            err => {
              console.log(err);
            }
          );
        } else {
          console.log("开户行地址为空");
        }
      },
      // 支行地址搜索
      handleSearch(value) {
        // console.log(value)
        if (escape(value).indexOf("%u") < 0) {
          let keywords = value;
          var newList = [];
          this.bankBranchoptions.forEach(item => {
            if (item.label.indexOf(keywords) != -1) {
              newList.push(item);
            }
          });
          this.bankBranchoptions = newList;
        } else {
          this.bankBranchoptions = this.bankBranchList;
        }
      },
      //卡号
      findCardBin() {
        if (!this.mer) {
          return;
        }
        let selvalue = this.form.getFieldValue("cardNo");
        console.log(selvalue);
           let isnum = /^\d+$/.test(selvalue);
                    if(!isnum){
                        console.log("cg");
                        return false
                    }
        this.$axios.get("/agent/card/bin/search/" + selvalue).then(
          res => {
            console.log("res", res);
            if (res.data.code == "OK") {
              this.cardType = res.data.data.cardtype;
            } else if (res.data.code == "NEED_LOGIN") {
            } else {
              // this.$message.warning("卡号有误！");
            }
          },
          err => {
            console.log(res);
          }
        );
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text
            .toLowerCase()
            .indexOf(input.toLowerCase()) >= 0
        );
      },

      // 获取验证码
      getCode() {
        if (this.phone) {
          this.getBankcode();
          const TIME_COUNT = 60;
          if (!this.timer) {
            this.count = TIME_COUNT;
            this.issend = false;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.issend = true;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000);
          }
        } else {
          this.$message.warning("请输入银行预留手机号");
        }
      },
      getBankcode() {
        let mobileNo = this.form.getFieldValue("mobileNo");
        this.loading = true;
        this.$axios.get("/agent/customer/org/bank/mobile/vcode/" + mobileNo).then(
          res => {
            console.log("res", res);
            if (res.data.code == "OK") {
              this.loading = false;
            } else {
              this.$message.warning(res.data.message)
              this.loading = false;
            }
          },
          err => {
            console.log(res);
          }
        );
      },
      bankInfoModify() {
        this.bankInfo = false;
      }
    }
  };
// }
</script>


<style lang="scss" scoped>
  .ant-input {
    width: 50%;
  }

  .btn-sty {
    background-color: #ccc;
    border: 1px solid #ccc;
    color: #333;
  }

  .formGroupTitle {
    font-size: 20px;
    font-weight: bold;
    text-align: right;
    margin-bottom: 20px;
  }

  .text-div {
    text-align: center;
  }

  .text-div button {
    margin: 0 10px;
  }

  .width-sty {
    width: 50%;
  }

  .w-sty {
    width: 80%;
  }

  .result {
    color: red;
    text-align: right;
  }

  .submitButton {
    width: 10vw;
  }
</style>